<template>
  <div>
    <!--  列表搜索 -->
    <div>

    </div>
<!--    列表内容-->
    <div>
      <a-table
          size="default"
          :columns="columns"
          :data-source="tbdata"
          :rowSelection="rowSelection"
          :pagination="pagination"
          @change="changePage"
      >
        <template #bodyCell="{ column, record }">

          <template v-if="column.key === 'serial'">
            <span>
              {{ record.id +1 }}
            </span>
          </template>
          <template v-if="column.key === 'action'">
            <span>
              <a @click="handleEdit(record)">修改</a>
              <a-divider type="vertical" />
              <a @click="handleSub(record)">删除</a>
            </span>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup>
import {ref,onMounted} from "vue";
import store from "store";
import axios from "axios";
//定义表格的表头
const columns=[
  {
    title: '#',
    key: 'serial'
  },
  {
    title: '序号',
    dataIndex: 'id',
    sorter:true
  },
  {
    title: '账号',
    dataIndex: 'username'
  },
  {
    title: '密码',
    dataIndex: 'password'
  },
  {
    title: '操作',
    width: '150px',
    key: 'action'
  }
]

const pagination = ref({
  disabled: false,  //禁用分页
  hideOnSinglePage: false, //只有一页时是否隐藏分页器
  pageSize: 10, //每页条数，所有页设置统一的条数
  pageSizeOptions: ['10', '20', '30'], //每页显示的条数，每页设置不同的条数
  total: 100, //数据总数
  current:1
})
const currpage = ref(1)

const tbdata = ref([
  {
    id:100,
    username:"admin1100",
    password:"221sd.fdww.weq"
  }
])

const rowSelection = () => {
  console.log("选择行？")
}
const handleEdit = (rdata) => {
  console.log(rdata);
}

const handleSub=(rdata)=>{
  console.log(rdata);
}

const changePage = (obj) => {
  loadData2();
}
const loadData2 = async () => {
  //请求接口 Axios
  const r = await axios({
    url:"/api/sysuser/page?size="+pagination.value.pageSize+"&page="+pagination.value.current,
    method:"get",
    headers:{
      access_token: store.get('access_token')
    }
  })
  if(r.data.code==0){
     //成功
     tbdata.value=r.data.data.records;
     pagination.value.total=r.data.data.total;
  }
}
// const loadData = () => {
//   console.log(currpage.value);
//   console.log(pagination.value.pageSize);
//   var s=(currpage.value-1) * pagination.value.pageSize+1;
//   var e=currpage.value * pagination.value.pageSize;
//   console.log(s+"--->"+e);
//   var arr=new Array();
//   for(var i=s;i<=e;i++){
//     arr.push({
//       id:i,
//       username:"admin-"+i,
//       password:"221sd.fdww.weq"+i
//     })
//   }
//   tbdata.value=arr;
// }
onMounted(async ()=>{
  loadData2();
  console.log(tbdata.value);
})
</script>

<style scoped>

</style>
